# Учебный проект: Список товаров

Создайте класс `ProductGrid`, описывающий компонент "Список товаров".

В качестве аргумента в конструктор класса передаётся массив объектов товаров:

```js
let products = [
  {
    name: "Laab kai chicken salad", // название товара
    price: 10, // цена товара
    category: "salads", // категория, к которой он относится, нам это понадобится чуть позже
    image: "laab_kai_chicken_salad.png", // название картинки товара
    id: "laab-kai-chicken-salad" // уникальный идентификатор товара, нужен для добавления товара в корзину
  },

  {
    name: "Som tam papaya salad",
    price: 9.5,
    category: "salads",
    image: "som_tam_papaya_salad.png",
    id: "som-tam-papaya-salad",
    spiciness: 0
  },

  // и др.
];

let productGrid = new ProductGrid(products);
```

После этого в `productGrid.elem` должен быть доступен корневой DOM-элемент списка товаров. Вот его основа:

```html
<div class="products-grid">
  <div class="products-grid__inner">
    <!--ВОТ ТУТ БУДУТ КАРТОЧКИ ТОВАРОВ-->
  </div>
</div>`
```

Для каждого объекта из массива товаров нужно отрисовать карточку товара на основе класса `ProductCard`, который мы делали ранее, и вставить их внутрь элемента с классом `products-grid__inner`. Здесь используется точно такой же формат объекта товара как и в классе `ProductCard`.

## Фильтрация товаров

Как вы помните, в нашем ресторане есть возможность показывать только те товары, которые соответствуют критериям фильтрации, например, определённой категории товаров, максимальной остроте и др. 

Чтобы это работало, нам нужно создать метод `updateFilter(filters)`, который отобразит в списке товаров только те, которые соответствуют критериям фильтрации.

 В качестве аргумента он принимает объект `filters`:

```js
let filters = {
  noNuts: true, // true/false
  vegeterianOnly: false, // true/false
  maxSpiciness: 3, // числа от 0 до 4
  category: 'soups' // уникальный идентификатор категории товара
};

productGrid.updateFilter(filters); 
```

После вызова метода, должны быть показаны `только те товары, которые удовлетворяют значениям новых фильтров`. Давайте разберём отдельно по каждому свойству:
- `filters.noNuts` - `true/false` - если значение `true`, то нужно показать только товары `без орехов`, т.е. товары, у которых в свойстве `nuts` стоит `false` или такое свойство отсутствует вовсе. Если значение `false` - то не учитываем этот критерий. 
- `filters.vegeterianOnly` - `true/false` - если значение `true`, то нужно показать только `вегетарианские` товары, т.е. товары, у которых в свойстве `vegeterian` стоит `true`. Если значение `false` - то не учитываем этот критерий.
- `filters.maxSpiciness` - `число от 0 до 4` - показывать только те товары, у которых в свойстве `spiciness` число меньше или равное заданному.
- `filters.category` - `уникальный идентификатор категории` - показывать только те товары, у которых в свойстве `category` такое же значение. Если здесь передана пустая строка или такого свойства нет в `filters` - показывать все товары.

Обращаем ваше внимание, что метод `updateFilter`, может вызываться с неполным объектом `filters`:

```js
productGrid.updateFilter({ noNuts: true }); 
productGrid.updateFilter({ category: 'soups' });

/* После чего должны быть показаны товары для критериев:
noNuts: true и category: 'soups'
*/
```

В таком случае, мы должны сохранять критерии фильтрации после предыдущего вызова. 

Например, после выполнения кода из примера выше, должны бы показаны товары, которые соответсвуют обоим критериям фильтрации: `noNuts: true` и `category: 'soups'`. 
